<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<jsp:include page="${APP_PATH }/userController/toHeadIndex"></jsp:include>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>酒店列表</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript"
	src="${APP_PATH }/static/js/jquery.min.js"></script>
<link
	href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<style type="text/css">
</style>
<script
	src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="${APP_PATH }/static/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
	$(function() {
		$("#train_href").removeClass('active');
		$("#plane_href").removeClass('active');
		$("#hotel_href").addClass('active');
		
		//查询，回调显示
		$("#findhotelListBut").click(function(){
			findhotelList();
		});
		
		//预定机票td[name=aircraftTd]
		$("#hotelBody").delegate('a[name=reservehotel]','click',function(){
			var hotelId = $(this).closest("tr").find('td[name=hotelId]').text();
			var startDate =$("#startDate").val();
			var endDate = $("#endDate").val();
			window.location.href= "${APP_PATH}/hotelController/gethotelOrderEdit?hotelId="+hotelId+"&startDate="+startDate+"&endDate="+endDate;
		});
	});
	
	
	//动态加载表格
	function findhotelList(){
		$.ajax({
			url:"${APP_PATH}/hotelController/findhotelList",
			type:"POST",
			data:{
				"cityName":$("#cityName").val(),
				"endDate":$("#endDate").val(),
				"startDate":$("#startDate").val()
			},
			success: function (result) {  
				$("#hotelBody").empty();
				var hotelList = result.extend.hotelList;
				$.each(hotelList,function(index,hotel){
					var hotelId = $("<td name='hotelId' style='display: none;'></td>").append(hotel.hotelId);
					var cityName = $("<td name='cityName' style='display: none;'></td>").append(cityName);
					var hotelImg = $("<img alt='' src='' width='50px;' height='50px;'>");
					$(hotelImg).attr("src","${APP_PATH}/"+hotel.pictureUrl);
					var hotelPictureUrl = $("<td name='hotelPictureUrl'></td>").append(hotelImg);
					var hotelName = $("<td name='hotelName'></td>").append(hotel.hotelName);
					var hotelPrice = $("<td name='hotelPrice' style='color: red;font-size: 15px;'></td>").append(hotel.hotelPrice);
					var hotelA = $("<a name='reservehotel' href='javascript:void(0);' style='text-decoration: none;'></a>").append("预定");
					var Atd = $("<td name='hotelName'></td>").append(hotelA);
					$("<tr></tr>").append(hotelId)
						.append(cityName)
						.append(hotelPictureUrl)
						.append(hotelName)
						.append(hotelPrice)
						.append(Atd)
						.appendTo("#hotelBody");
			});
        }  
		});
	}
	
	
	
	
	
</script>
</head>
<body>
	<div class="container">
		<div class="table-responsive">
			<form class="form-inline">
				<div class="form-group">
					<label for="exampleInputName2">入住城市</label> <input type="text"
						class="form-control" id="cityName" value="${cityName }">
				</div>
				<div class="form-group">
					<label for="exampleInputEmail2">入住时间</label> <input id="startDate"
						value="${startDate }" class="Wdate"
						onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d',readOnly:true})"
						style="width: 130px; height: 32px; border-radius: 4px;" />
				</div>
				<div class="form-group">
					<label for="exampleInputEmail2">离店时间</label> <input id="endDate"
						value="${endDate }" class="Wdate"
						onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d',readOnly:true})"
						style="width: 130px; height: 32px; border-radius: 4px;" />
				</div>
				<button type="button" class="btn btn-default" id="findhotelListBut">查询</button>
			</form>
		</div>
		<br>

		<div class="table-responsive">
			<table class="table table-hover">
				<tbody id="hotelBody">
					<c:forEach items="${hotelList }" var="hotel">
						<tr id="hotelTr">
							<td name="hotelId" style="display: none;">${hotel.hotelId }</td>
							<td name="startDate" style="display: none;">${startDate }</td>
							<td name="endDate" style="display: none;">${startDate }</td>
							<td name="cityName" style="display: none;">${hotel.cityName }</td>
							<td name="hotelPictureUrl">
								<img alt="" src="${APP_PATH }/${hotel.pictureUrl}" width="50px;" height="50px;">
							</td>
							<td name="hotelName">${hotel.hotelName }</td>
							<td name="hotelPrice" style="color: red;font-size: 15px;">￥${hotel.hotelPrice }</td>
							<td name="reservehotel">
								<a name="reservehotel" href="javascript:void(0);"style="text-decoration: none;">预定</a>
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
	</div>

</body>
</html>